<script lang="ts" setup>
  import {
    createInstitution,
    updateInstitution,
    uploadInstitutionIcon,
  } from '@/api-new/organizational-management';
  import { useForm } from '@/hooks/arco/useForm';
  import { useModeModalBinder } from '@/hooks/arco/useModeModalBinder';
  import { Message } from '@arco-design/web-vue';
  import { ref } from 'vue';

  const instId = ref('');

  const form = useForm({
    state: {
      instId: '',
      name: '',
      shortName: '',
      provinceCode: '1',
      cityCode: '2',
      districtCode: '3',
      file: [] as any[],
    },
    rules: {
      name: {
        required: true,
        message: '请输入机构名称',
      },
      shortName: {
        required: true,
        message: '请输入机构简称',
      },
      file: {
        required: true,
        message: '请上传机构LOGO',
      },
    },
  });

  const handleBeforeUpload = (file: File) => {
    const isLt1M = file.size / 1024 / 1024 < 1;

    if (!isLt1M) {
      Message.error('图片大小不能超过 1MB');
    }

    // 返回 true 表示继续上传，返回 false 则停止上传
    return isLt1M;
  };

  const modal = useModeModalBinder({
    modes: ['add', 'edit'] as const,
    onShow(mode, otherParams) {
      if (mode === 'add') {
        form.backToInit();
      } else {
        console.log(otherParams);
        instId.value = otherParams.instId;
        form.setFieldsValue(otherParams);
        form.state.name = otherParams.instName;
        form.state.file = [
          {
            uid: -1,
            last: true,
            url: otherParams.imageUrl,
          },
        ];
      }
    },
    async onOkClick(mode) {
      await form.validate();

      const { file, ...data } = form.state;

      let result;

      if (mode === 'add' && !instId.value) {
        result = await createInstitution(data);
        instId.value = result.instId;
      } else {
        result = await updateInstitution(data);
      }

      if (file[0].last) {
        return Promise.resolve();
      }
      const formData = new FormData();
      formData.append('file', file[0].file);

      return uploadInstitutionIcon(instId.value, formData);
    },
  });

  defineExpose(modal.expose);
</script>

<template>
  <a-modal width="500px" v-bind="modal.bindProps">
    <a-form v-bind="form.bindProps" layout="vertical">
      <a-form-item field="name" label="机构名称" required>
        <a-input v-model="form.state.name" placeholder="请输入机构名称" />
      </a-form-item>
      <a-form-item field="shortName" label="机构简称" required>
        <a-input v-model="form.state.shortName" placeholder="请输入机构简称" />
      </a-form-item>
      <a-form-item field="file" label="机构Logo" required>
        <a-upload
          v-model:file-list="form.state.file"
          list-type="picture-card"
          image-preview
          :auto-upload="false"
          :show-upload-button="true"
          :show-retry-button="false"
          :limit="1"
          :on-before-upload="handleBeforeUpload"
        >
        </a-upload>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style scoped>
  .mb-4 {
    margin-bottom: 1rem;
  }
</style>
